<template>
  <div class="one">
    <div>
      <el-card>
        {{ model }}
        <div class="timepack" style="display: flex">
          <!-- 选择 -->
          <div class="select" style="margin-right: 10px">
            <el-select v-model="model" placeholder="请选择" @change="changes">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 今日 -->
          <div class="block" style="margin: 0 10px" v-if="model == 'day'">
            <el-date-picker
              v-model="day1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              @change="timeChange"
            >
            </el-date-picker>
          </div>
          <!-- 今日 -->
          <div class="block" v-if="model == 'day'" style="margin: 0 10px">
            <el-date-picker
              v-model="day2"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
              @change="timeChange"
            >
            </el-date-picker>
          </div>
          <!-- 月 -->
          <div class="block" style="margin: 0 10px" v-if="model == 'month'">
            <el-date-picker
              v-model="month"
              align="right"
              type="month"
              placeholder="选择日期"
              @change="timeChange"
              :picker-options="pickerOptions2"
            >
            </el-date-picker>
          </div>
          <!-- 年 -->
          <div class="block" v-if="model == 'year'" style="margin: 0 10px">
            <el-date-picker
              v-model="year"
              align="right"
              type="year"
              placeholder="选择日期"
              @change="timeChange"
              :picker-options="pickerOptions2"
            >
            </el-date-picker>
          </div>
        </div>
      </el-card>
      <Timer />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Timer from "./time/index.vue";
export default {
  components: { Timer },

  data() {
    return {
      // isShow: true,
      model: "day",
      options: [
        {
          name: "日",
          value: "day",
        },
        {
          name: "月",
          value: "month",
        },
        {
          name: "年",
          value: "year",
        },
      ],
      //   时间范围
      timeArray: [],
      day1: new Date(),
      day2: new Date(),
      month: new Date(),
      year: new Date(),
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      pickerOptions: {
        disabledDate: (time) => {
          if (this.day2) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() > new Date(this.day2).getTime()
            );
          }
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.day1) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(this.day1).getTime()
            );
          }
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
    };
  },
  methods: {
    timeChange() {
      switch (this.model) {
        case "day":
          this.timeArray[0] = moment(this.day1).format(
            "YYYY-MM-DD" + " 00:00:00"
          );
          this.timeArray[1] = moment(this.day2).format(
            "YYYY-MM-DD" + " 23:59:59"
          );
          break;
        case "month":
          this.timeArray[0] = moment(this.month)
            .add("month", 0)
            .format("YYYY-MM-01" + " 00:00:00");

          //   本月最后一天
          this.timeArray[1] = moment(this.month)
            .endOf("month")
            .format("YYYY-MM-DD" + " 23:59:59");
          break;
        case "year":
          // 上个月第一天
          this.timeArray[0] = moment(this.year).format(
            "YYYY-01-01" + " 00:00:00"
          );
          //   本月最后一天
          this.timeArray[1] = moment(this.year).format(
            "YYYY-12-31" + " 23:59:59"
          );
          break;
      }
      let arr = [...this.timeArray, this.model];
      //   console.log(arr, 1);
      this.$store.dispatch("timechanges", arr);
    },
    changes(val) {
      switch (val) {
        case "day":
          this.timeArray[0] = moment(this.day1).format(
            "YYYY-MM-DD" + " 00:00:00"
          );
          this.timeArray[1] = moment(this.day2).format(
            "YYYY-MM-DD" + " 23:59:59"
          );
          break;
        case "month":
          this.timeArray[0] = moment(this.month)
            .add("month,0")
            .format("YYYY-MM-01" + " 00:00:00");
          //   本月最后一天
          this.timeArray[1] = moment(this.month)
            .endOf("month")
            .format("YYYY-MM-DD" + " 23:59:59");
          break;
        case "year":
          // 上个月第一天
          this.timeArray[0] = moment(this.year).format(
            "YYYY-01-01" + " 00:00:00"
          );
          //   本月最后一天
          this.timeArray[1] = moment(this.year).format(
            "YYYY-12-31" + " 23:59:59"
          );
          break;
      }
      let arr = [...this.timeArray, val];
      //   console.log(arr, 2);
      this.$store.dispatch("timechanges", arr);
    },
  },
  mounted() {
    this.timeChange();
  },
};
</script>

<style></style>
